import React from "react";
import _ from 'lodash'
import { Input, Space, Tabs } from "antd";
import { ExclamationCircleFilled } from "@ant-design/icons";
import { goodsInfoPage, goodsInfoApprove, goodsInfoRejected, goodsClassifyList } from '@/request/storeBackManage/goodsManage/selfRunGoodsAudit';
import { getDateTime3 } from '@/utils/getDate'
import ThePagination from "@/components/ThePagination";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import TheDialog from "@/components/TheDialog";
import TheImage from "@/components/TheImage";
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import store from "@/store/store"
const { TabPane } = Tabs;
const { TextArea } = Input;

export default class Examine extends React.Component {
  constructor(props) {
    super(props)
    this.queryFormRef = React.createRef()
    this.state = {
      columns: [
        {
          title: "商品ID",
          dataIndex: "goodsId",
          key: "goodsId",
          width: 200,
        },
        {
          title: "商品名称",
          dataIndex: "goodsName",
          key: "goodsName",
          width: 300,
        },
        {
          title: "商品图片",
          dataIndex: "goodsShowImages",
          key: "goodsShowImages",
          width: 200,
          render: (text, record) => {
            return <TheImage src={record.goodsShowImages.split(',')[0]} width={80} height={80} />
          }
        },
        {
          title: "商品分类",
          dataIndex: "goodsClassifyName",
          key: "goodsClassifyName",
          width: 200,
        },
        {
          title: "日常价",
          dataIndex: "currentPrice",
          key: "currentPrice",
          width: 200,
          render: (text, record) => {
            return record.currentPriceMax === record.currentPriceMin ? <React.$Price price={record.currentPriceMax || 0} /> : <div>
              <React.$Price price={record.currentPriceMin || 0} /> ~<React.$Price price={record.currentPriceMax || 0} />
            </div>

          }
        },
        {
          title: "划线价",
          dataIndex: "originalPrice",
          key: "originalPrice",
          width: 200,
          render: (text, record) => {
            return record.originalPriceMax === record.originalPriceMin ? <React.$Price price={record.originalPriceMax || 0} /> : <div>
              <React.$Price price={record.originalPriceMin || 0} /> ~<React.$Price price={record.originalPriceMax || 0} />
            </div>
          }
        },
        {
          title: "审核状态",
          width: 150,
          render: () => {
            return <span>待审核</span>
          }
        },
        {
          title: "申请时间",
          dataIndex: "createTime",
          key: "createTime",
          width: 200,
        },
        {
          title: "上次操作时间",
          dataIndex: "lastUpdateTime",
          key: "lastUpdateTime",
          width: 200,
          render: (text, record) => {
            return record.lastUpdateTime ? record.lastUpdateTime : "/"
          }
        },
        {
          title: "操作人",
          dataIndex: "userName",
          key: "userName",
          width: 200,
          render: (text, record) => {
            return record.userName ? record.userName : "/"
          }
        },
        {
          title: "操作",
          fixed: "right",
          width: 200,
          render: (text, record) => {
            return (
              <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center' }}>
                <TheButton haspermi={['goodsManage:selfRunGoodsAudit:details']} onClick={() => this.props.history.push(`/goodsManage/centerGoodsList/detail/${record.goodsId}`)}>商品详情</TheButton>
                <TheButton haspermi={['goodsManage:selfRunGoodsAudit:pass']} onClick={() => this.cancelConfirm(record.goodsId)}>通过</TheButton>
                <TheButton haspermi={['goodsManage:selfRunGoodsAudit:reject']} onClick={() => this.setState({ visible: true, textArea: '', rejectedgoodsId: record.goodsId })}>驳回</TheButton>
              </div>
            );
          },
        },
      ],
      data: [],
      pageData: {
        pageNo: 1,
        pageSize: 10,
      },
      total: 0,
      visible: false,
      searchValue: {},
      rejectedgoodsId: '',
      newColumns: [],
      form_show: true,
      searchOption: [
        { field: 'goodsName', label: '商品名称', placeholder: '商品名称', required: false, rules: [], type: 'Input', defaultValue: '' },
        { field: 'goodsId', label: '商品ID', placeholder: '商品ID', required: false, rules: [], type: 'Input', defaultValue: '' },
        {
          field: 'classifyId', label: '所属类目', placeholder: '所属类目', required: false, rules: [], txt: 'goodsClassifyName', value: 'goodsClassifyId', type: 'Select', options: [], api: goodsClassifyList, params: { level: 2 }, defaultValue: ''
        },
        { field: 'time', label: '申请时间', placeholder: '申请时间', required: false, rules: [], type: 'RangePicker' },

      ],
      queryForm: {},
      textArea: ''
    };
  }
  async componentDidMount() {
    this.onColumnsFilter(this.state.columns)
    let searchParams = store.getState().searchValue
    let { queryForm, pageData, pathName } = searchParams
    console.log(pageData, 'pageData');
    pageData = {
      ...this.state.pageData,
      pageNo: pageData ? pageData.pageNo : 1,
      pageSize: pageData ? pageData.pageSize : 10,

    }
    if (searchParams && pathName == 'mallExamine') {
      this.setState({
        queryForm, pageData
      }, () => {
        this.queryFormRef.onSetDefault({ ...queryForm })
        this.getData()
      })
    } else {
      await this.getData()

    }
  }
  getData = async (values) => {
    if (values && !_.isEmpty(values.time)) {
      values.createTimeStart = getDateTime3(values.time[0])
      values.createTimeEnd = getDateTime3(values.time[1])
    }
    this.setState({
      queryForm: values === undefined ? this.state.queryForm : { ...values }
    }, async () => {
      const { pageData, queryForm } = this.state
      const params = { pageData, queryForm }
      store.dispatch({
        type: 'SaveSearchValues',
        data: {
          pathName: 'mallExamine',
          ...params
        }
      })
      const { time, ...form } = this.state.queryForm
      let res = await goodsInfoPage({ reviewStatus: 'S', ...form, ...this.state.pageData })
      if (res.data && res.code === 0) {
        this.setState({
          data: res.data,
          pageData: {
            pageNo: res.pageNo,
            pageSize: res.pageSize
          },
          total: res.totalCount
        })
      }
    })
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getData()
    })
  };
  getValue = (value) => {
    this.setState({
      searchValue: value,
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
    }, () => {
      this.getData()
    })
  }
  cancelConfirm = (goodsId) => {
    React.$confirm({
      title: "您确认通过审核本条商品吗？",
      onOk: async () => {
        await goodsInfoApprove({ goodsId }).then(
          (res) => {
            if (res.code === 0) {
              React.$message({
                type: 'info',
                content: '审核成功'
              })
            }
          }
        )
        this.getData()
      },
    });
  };
  handleCancel = () => {
    this.setState({ visible: false, rejectedgoodsId: '' });
  };
  handleOk = async () => {
    const dismissReason = this.state.textArea
    if (!dismissReason) {
      return React.$message({
        type: 'error',
        content: '请输入驳回原因'
      })
    } else {
      let res = await goodsInfoRejected({ goodsId: this.state.rejectedgoodsId, dismissReason })
      if (res.code === 0) {
        this.setState({ visible: false }, () => {
          React.$message({
            type: 'info',
            content: '驳回成功'
          })
          this.getData()
        });
      }
    }
  };
  onReset() {
    this.setState({
      queryForm: {}
    }, () => {
      this.getData()
    })
  }
  onColumnsFilter(value) {
    this.setState({
      newColumns: value
    })
  }
  onFormSearch(values) {
    this.setState({
      pageData: {
        pageNo: 1, pageSize: 10
      }
    }, () => {
      this.getData(values)
    })
  }
  render() {
    const { columns, data, pageData, total, visible, form_show, searchOption, newColumns } = this.state;
    return (
      <div className="p-layout-box commodity-examine">
        <Tabs defaultActiveKey="S" >
          <TabPane tab="待审核" key="S">
            <div >
              <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
                onGetValues={(values) => this.onFormSearch(values)}
                onReset={(values) => this.onReset(values)}
              >
              </TheQueryForm>
              <TheTableExtend
                columns={columns}
                onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
                onTableRefresh={() => this.getData()}
                onColumnsFilter={(value) => this.onColumnsFilter(value)}
              >
              </TheTableExtend>
              <TheTable
                scroll={{ x: "960", y: '58vh' }}
                columns={newColumns}
                dataSource={data}
              />
              <ThePagination
                pageNo={pageData.pageNo}
                pageSize={pageData.pageSize}
                total={total}
                pageChange={this.pageChange}
              />
            </div>
          </TabPane>
        </Tabs>
        <TheDialog
          title={
            <div>
              <ExclamationCircleFilled
                style={{ color: "#FAAD14", marginRight: 10 }}
              />
              输入驳回原因
            </div>
          }
          width={400}
          visible={visible}
          handleCancel={this.handleCancel}
          handleOk={this.handleOk}
        >
          <TextArea
            onChange={(e) => this.setState({
              textArea: e.target.value
            })}
            allowClear
            autoSize={{ minRows: 6, maxRows: 6 }}
            maxLength={50}
            showCount
          />
        </TheDialog>
      </div>
    );
  }
}


